import React from 'react';
import { NavLink, Link } from 'react-router-dom'


/**
 * 导航列表按钮
 */

const ListBtn = (props) => (
    <li className={props.data.isActive ? 'active' : ''} >
        <a href='#' onClick={props.handlerClick} data={props.idx}>
            <i className="fa fa-home"></i>
            <span className="nav-label">{props.data.name}</span>
            <span className="fa arrow"></span>
        </a>
        <ul className={props.data.isActive ? "nav nav-second-level collapse in" : "nav nav-second-level collapse"} style={{ height: '0px' }}>
            {
                props.data.childBtns.map((item, i) => (
                    <li key={i}>
                        <NavLink exact to={item.url}>{item.name}</NavLink>
                    </li>
                ))
            }
        </ul>
    </li>
)


class AppNavigator extends React.Component {

    constructor(props) {
        super(props);

        let routes = [
            { name: '主页', isActive: true, childBtns: [{ url: '/', name: '主页' }] },
            { name: '主页2', isActive: false, childBtns: [{ url: '/', name: '主页a' }, { url: '/', name: '主页b' }] },

        ]

        this.state = { routes: routes }
    }

    logout = (params) => {
        this.props.onLogout();
    }

    onChangeActive = (event, t) => {
        // console.log(this.state.routes);
        
        if (event.target.parentElement.className === "active") {
            event.target.parentElement.className = '';
            if (event.target.parentElement.getElementsByClassName('nav')[0])
                event.target.parentElement.getElementsByClassName('nav')[0].className = 'nav nav-second-level collapse'
        } else {
            event.target.parentElement.className = 'active'
            if (event.target.parentElement.getElementsByClassName('nav')[0])
                event.target.parentElement.getElementsByClassName('nav')[0].className = 'nav nav-second-level collapse in'
        }
        
    }

    render() {

        const nickname = this.props.userinfo ? this.props.userinfo.nickname : '';


        return (

            <nav className="navbar-default navbar-static-side" role="navigation">
                <div className="nav-close"><i className="fa fa-times-circle"></i> </div>

                <div className="slimScrollDiv" style={{ position: 'relative', width: 'auto', height: '100%' }}><div className="sidebar-collapse" style={{ width: 'auto', height: '100%' }}>
                    <ul className="nav" id="side-menu">
                        <li className="nav-header">
                            <div className="dropdown profile-element">
                                <span><img alt="image" className="img-circle" src="img/profile_small.jpg"></img></span>
                                <a data-toggle="dropdown" className="dropdown-toggle" href="#">
                                    <span className="clear">
                                        <span className="block m-t-xs"><strong className="font-bold">Beaut-zihan</strong></span>
                                        <span className="text-muted text-xs block">超级管理员<b className="caret"></b></span>
                                    </span>
                                </a>
                                <ul className="dropdown-menu animated fadeInRight m-t-xs">
                                    <li><a href="login.html">安全退出</a></li>
                                </ul>
                            </div>
                            <div className="logo-element">H+
                        </div>
                        </li>
                        <li>
                            <a className="" href="layouts.html" data-index="8"><i className="fa fa-columns"></i> <span className="nav-label">布局</span></a>
                        </li>
                        {this.state.routes.map((item, i) => (
                            <ListBtn key={i} data={item} handlerClick={this.onChangeActive} idx={i} />
                        ))}




                    </ul>
                </div>
                    <div className="slimScrollRail" style={{ width: '4px', height: '100%', position: 'absolute', top: '0px', display: 'none', borderRadius: '7px', background: "rgba(51,51,51)", opacity: '0.9', zIndex: '90', right: '1px' }}></div></div>
            </nav>

            // {/* // <ul classNameName="app-navigation">
            // //     <li><NavLink exact to="/">首页</NavLink></li>
            // //     {liList}
            // //     <p className="account-tap" ref='loginName'>{nickname}</p>
            // //     {btn}
            // // </ul> */}
        )
    }
}

export default AppNavigator;